<!-- 订单审核 -->
<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <p>万事达-TMS客户端</p>
      <div>
        <span class="iconfont icon-svg45-copy">⑧</span>
        <el-button type="info">退出系统</el-button>
      </div>
    </el-header>

    <!-- 标题区域 -->
    <el-row class="title">
      <el-col :span="24">
        <div>订单管理-审核订单</div>
      </el-col>
    </el-row>

    <!-- 编号区域 -->
    <el-row class="num_area" :gutter="20">
      <el-col :span="4">
        订单号 <span class="toRed">*</span> :XL189666654566</el-col>
      <el-col :span="4">合同编号:HTDKL8699896378</el-col>
      <el-col :span="4">运输单号:SL8699896378</el-col>
    </el-row>

    <!-- 客户信息表 -->
    <div class="table_title">客户信息</div>
    <el-table :data="customer_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="customer_name" label="用户名" align="center" width="265px"></el-table-column>
      <el-table-column prop="customer_firm_name" label="公司名" align="center" width="265px"></el-table-column>
      <el-table-column prop="customer_per" label="联系人" align="center" width="265px"></el-table-column>
      <el-table-column prop="customer_phone" label="联系电话" align="center" width="265px"></el-table-column>
    </el-table>

    <!-- 委托人信息表 -->
    <div class="table_title">委托人信息</div>
    <el-table :data="client_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="client_firm" label="委托方" align="center" width="200px"></el-table-column>
      <el-table-column prop="client_per" label="委托人" align="center" width="100px"></el-table-column>
      <el-table-column prop="client_phone" label="委托人联系电话" align="center" width="150px"></el-table-column>
      <el-table-column prop="pickup_goods_address" label="提货地址" align="center" width="300px"></el-table-column>
      <el-table-column prop="pickup_goods_per" label="提货联系人" align="center" width="200px"></el-table-column>
      <el-table-column prop="pickup_goods_phone" label="提货联系电话" align="center" width="150px"></el-table-column>
    </el-table>

    <!-- 收货人信息 -->
    <div class="table_title">收货人信息</div>
    <el-table :data="consignee_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="consignee_firm" label="收货方" align="center" width="200px"></el-table-column>
      <el-table-column prop="consignee_per" label="收货人" align="center" width="100px"></el-table-column>
      <el-table-column prop="consignee_phone" label="联系电话" align="center" width="150px"></el-table-column>
      <el-table-column prop="consignee_address" label="收货地址" align="center" width="300px"></el-table-column>
    </el-table>

    <!-- 地点与计划时间 -->
    <div class="table_title">地点与计划时间</div>
    <el-table :data="address_date_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="origin" label="始发地" align="center" width="200px"></el-table-column>
      <el-table-column prop="destination" label="目的地" align="center" width="200px"></el-table-column>
      <el-table-column prop="shipment" label="计划装货时间" align="center" width="200px"></el-table-column>
      <el-table-column prop="discharge_cargo" label="计划到货时间" align="center" width="200px"></el-table-column>
    </el-table>

    <!-- 货物信息表 -->
    <div class="table_title">货物信息</div>
    <el-table :data="goods_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }" show-summary>
      <el-table-column prop="goods_name" label="货名" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_model" label="规格型号" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_total_package" label="总包装" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_total_quantity" label="总数量" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_total_weight" label="总重量kg" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_total_volume" label="总体积m³" align="center" width="100px"></el-table-column>
    </el-table>

    <!-- 订单备注 -->
    <div class="table_title">订单备注</div>
    <el-row>
      <el-col :span="12">
        <el-input class="textarea" type="textarea" :rows="2" v-model="order_mark"> </el-input>
      </el-col>
    </el-row>
  
    <!-- 审核意见 -->
    <div class="table_title toRed">审核意见</div>
    <el-row>
      <el-col :span="12">
        <el-input class="textarea" type="textarea" :rows="2" v-model="order_mark"> </el-input>
      </el-col>
    </el-row>
    <!-- 提交和返回 -->
    <el-row :gutter="15" class="sub_return">
      <el-col :span="12" class="sub_btn">
        <el-button type="warning">提交</el-button>
      </el-col>
      <el-col :span="12" class="return_btn">
        <el-button type="warning" @click="handleReturnPage">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 客户信息
      customer_info: [
        {
          customer_name: "sanwenhan", //用户名
          customer_firm_name: "深圳市农产品科技局有限公司", //公司名
          customer_per: "张三", //联系人
          customer_phone: "15969856698", //联系电话
        },
      ],
      // 委托人信息
      client_info: [
        {
          client_firm: "上海海棠科技有限公司", // 委托方
          client_per: "海棠", // 委托人
          client_phone: "18966669859", // 委托人联系电话
          pickup_goods_address: "上海市长红曲11街12栋302", // 提货地址
          pickup_goods_per: "王强", // 提货联系人
          pickup_goods_phone: "15966639996", // 提货联系电话
        },
      ],
      // 收货人信息表
      consignee_info: [
        {
          consignee_firm: "北京百度科技有限公司", // 收货方
          consignee_per: "小李", // 收货人
          consignee_phone: "18756669875", // 联系电话
          consignee_address: "北京市朝阳区1街129栋6号仓库", // 收货地址
        },
      ],
      // 地点与计划时间
      address_date_info: [
        {
          origin: "上海",
          destination: "北京",
          shipment: "2017/09/24 09:10",
          discharge_cargo: "2017/09/24 09:10",
        },
      ],
      // 货物信息表
      goods_info: [
        {
          goods_name: "白糖", // 货名
          goods_model: "1x0.8", //规格型号
          goods_total_package: "袋", // 总包装
          goods_total_quantity: "5", // 总数量
          goods_total_weight: "5", // 总重量kg
          goods_total_volume: "6", // 总体积m³
        },
      ],
      // 订单备注
      order_mark: "干燥仓储",
      // 总数量
      total_num: "",
      total_num1: "",
      // 总重量
      total_weight: "",
      total_weight1: "",
      // 总体积
      total_volume: "",
      total_volume1: "",
    };
  },

  methods: {
    // 返回上一页
    handleReturnPage() {
      this.$router.push("/carrier/transportplan");
    },
  },
};
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-header {
  background-color: #99a9bf;
  color: #333;
  font-size: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  div {
    span {
      margin: 30px;
      font-size: 28px;
    }
  }
}

.title {
  height: 30px;
  background-color: #d3dce6;
  line-height: 30px;
  margin-bottom: 5px;
  div {
    text-align: left;
    margin-left: 5px;
  }
}

.num_area {
  padding: 10px 5px;
  .toRed {
    color: red;
  }
}

.table_title {
  height: 30px;
  width: 90px;
  background-color: #ccc;
  line-height: 30px;
  text-align: center;
  margin: 10px 0;
  border-radius: 3px;
  font-size: 12px;
}
.el-table {
  display: table-cell;
}

.add_split_btn {
  text-align: left;
}

.toRed {
  color: red;
}
.goods_split_table {
  table-layout: fixed;
  background-color: #fff;
  border-color: rgba(154, 156, 161, 0.1);
  font-size: 14px;
  color: #606266;
  tr {
    height: 50px;
    th {
      background-color: #d3dce6;
      border-color: rgba(154, 156, 161, 0.1);
      margin: 0;
      border-collapse: collapse;
      color: #000;
    }
    td {
      border-color: rgba(154, 156, 161, 0.1);
      padding: 0;
      input {
        width: 108px;
        height: 50px;
        border: 0;
        outline: none;
        text-align:center;
      }
    }
  }
}

.sub_return {
  margin-top: 5px;
  .sub_btn {
    text-align: right;
  }
  .return_btn {
    text-align: left;
  }
}
</style>